<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>签到</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.0/mobile/layer.js"></script>
    <link href="https://cdn.bootcss.com/layer/3.1.0/mobile/need/layer.css" rel="stylesheet">
</head>
<body id="app">
    <div class="preview" id="preview">
        <div class="bg-image">
            <img src="{$ picUrl}" alt="">
            <div class="badge">
                <div class="badge-inner">
                    <span>
                        <div>已连续签到</div>
                        <div class="line"></div>
                        <div>{{info.signNum||0}}天</div>                                    
                    </span>                                        
                </div>
            </div>
            <div class="score">
                {{info.totalPoint||0}}分
            </div>
            <div class="msg" v-if="info.ifSignToday">
                今日已签到，获得{{info.point||0}}积分
            </div>
            <div class="msg" v-else>
                今日签到可获得{{info.point||0}}积分
            </div>        
        </div>
        <div class="sin-content">
            <div class="image">
                <img src="{$ bgPicUrl}" alt="">
            </div>
            <div class="content">
                <div class="button" @click="sign">
                    <img class="btn-submit" :src="info.ifSignToday === false ? info.signPicUrl : info.afterSignPicUrl" alt="">
                </div>
                <div class="rule">
                    <img src="{$ rulePicUrl}" alt="">
                </div>
            </div>
        </div>       
    </div> 
</body>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>

<script>
  var app = new Vue({
    el: '#preview',
    data: {
      info: {}
    },
    methods: {
      fetchData: function () {
        let url = location.href.replace('.html', '.json')
        $.get(url).done((function (res) {
          this.info = JSON.parse(res)
        }).bind(this))      
      },
      sign: function (res) {
        if (this.info.ifSignToday) {
          return layer.open({
            content: '今日已签到',
            skin: 'msg',
            time: 2
          })
        }
        let url = location.href.replace('index', 'signInIndex')
        url = url.replace('.html', '.json')
        $.get(url).done((function (res) {
          res = JSON.parse(res)
          if (res.code * 1 !== 0) {
          	return layer.open({
              content: res.msg,
              skin: 'msg',
              time: 2
            })
          }
          layer.open({
            content: '签到成功',
            skin: 'msg',
            time: 2
          })
          this.fetchData()
        }).bind(this))
      }
    },
    mounted: function () {
      this.fetchData()
    }
  }) 
</script>

<style>
@keyframes addOne {
  0% {
    opacity: 1;
    transform: translateY(0)
  }
  100% {
    opacity: 0.5;
    transform: translateY(10em)    
  }
}

#addOne {
  animation: addOne 1s ;
}

#app {
  margin: 0;
  padding: 0;
}
img {
  pointer-events: none;
}
#app .preview {
  width: 100vw;
}
#app .preview .score {
  color: #fff;
  font-weight: 800;
  top: 10px;
  left: 10px;
  position: absolute;
  font-size: 18px;
}
#app .preview .msg {
  color: #fff;
  font-weight: 800;
  bottom: 10px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  font-size: 14px;
}
#app .preview .formchose-editor-preview__inner {
  padding: 0;
}
#app .preview .sin-content {
  position: relative;
}
#app .preview .sin-content .image {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 0;
}
#app .preview .sin-content .image img {
  width: 100%;
}
#app .preview .sin-content .content {
  position: absolute;
  z-index: 1000;
  padding: 18px;
}
#app .preview .sin-content .content .button {
  width: 50%;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 20px;
}
#app .preview .sin-content .content .button img {
  width: 100%;
}
#app .preview .sin-content .content .rule {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 20px;
}
#app .preview .sin-content .content .rule img {
  width: 100%;
}
#app .preview .bg-image {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
#app .preview .bg-image img {
  width: 100%;
}
#app .preview .bg-image .badge {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 32vw;
  height: 32vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px;
  font-size: 16px;
}
#app .preview .bg-image .badge .badge-inner {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}
#app .preview .bg-image .badge span {
  color: #fc259e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid #fc259e;
  border-radius: 50%;
}
#app .preview .bg-image .badge span .line {
  border-top: 1px solid #ccc;
  width: 80%;
  margin: 5px 0;
}


</style>
</html>